﻿<UserControl x:Class="DemoZoomChart.SeriesZoomExtended"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:visualizationToolkit="clr-namespace:System.Windows.Controls.DataVisualization;assembly=System.Windows.Controls.DataVisualization.Toolkit"             
    xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"
    xmlns:chartingPrimitivesToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting.Primitives;assembly=System.Windows.Controls.DataVisualization.Toolkit"
    xmlns:wb="clr-namespace:System.Windows.Controls.Theming;assembly=System.Windows.Controls.Theming.WhistlerBlue"
    xmlns:local="clr-namespace:DemoZoomChart"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">

    <UserControl.Resources>
        <ControlTemplate TargetType="chartingToolkit:Chart" x:Key="ZoomChartTemplate">
            <Grid>
                <Canvas x:Name="ZoomCanvas" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Canvas.ZIndex="2">
                    <Border x:Name="ZoomBox" Height="100" Width="100" Canvas.ZIndex="2" BorderBrush="#FF006400" Background="#FF32CD32" BorderThickness="1" Opacity="0.4" Visibility="Collapsed" 
    						Canvas.Left="10" Canvas.Top="10" IsHitTestVisible="False"/>
                </Canvas>
                <Border BorderThickness="1" BorderBrush="Gray">
                    <ScrollViewer Padding="0" x:Name="ChartScrollArea" BorderThickness="0" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden" 
                                  MouseLeftButtonUp="ChartScrollArea_MouseLeftButtonUp" MouseLeftButtonDown="ChartScrollArea_MouseLeftButtonDown" Loaded="ChartScrollArea_Loaded" MouseMove="ChartScrollArea_MouseMove">
                        <chartingPrimitivesToolkit:EdgePanel x:Name="ChartArea" Style="{TemplateBinding ChartAreaStyle}" >
                            <Grid Canvas.ZIndex="-1" Style="{TemplateBinding PlotAreaStyle}" />
                        </chartingPrimitivesToolkit:EdgePanel>
                    </ScrollViewer>
                </Border>
            </Grid>
        </ControlTemplate>

        <ControlTemplate TargetType="chartingToolkit:Chart" x:Key="ZoomXTemplate">
            <Grid>
                <Border BorderThickness="1" BorderBrush="Transparent">
                    <ScrollViewer Padding="0" x:Name="ChartScrollArea" BorderThickness="0" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden" LayoutUpdated="XScrollArea_LayoutUpdated">
                        <chartingPrimitivesToolkit:EdgePanel x:Name="ChartArea" Style="{TemplateBinding ChartAreaStyle}"  />
                    </ScrollViewer>
                </Border>
            </Grid>
        </ControlTemplate>

        <ControlTemplate TargetType="chartingToolkit:Chart" x:Key="ZoomYTemplate">
            <Grid>
                <Border BorderThickness="1" BorderBrush="Transparent">
                    <ScrollViewer Padding="0" x:Name="ChartScrollArea" BorderThickness="0" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden" LayoutUpdated="YScrollArea_LayoutUpdated">
                        <chartingPrimitivesToolkit:EdgePanel x:Name="ChartArea" Style="{TemplateBinding ChartAreaStyle}" />
                    </ScrollViewer>
                </Border>
            </Grid>
        </ControlTemplate>

        <Style x:Key ="zoomChartMajorTickMarkStyle" TargetType="Line">
            <Setter Property="Visibility" Value="Collapsed" />
        </Style>
        <Style x:Key ="zoomChartAxisLabelStyle" TargetType="chartingToolkit:AxisLabel">
            <Setter Property="Visibility" Value="Collapsed" />
        </Style>
        <Style x:Key ="zoomChartHiddenPointStyle" TargetType="chartingToolkit:LineDataPoint">
            <Setter Property="Visibility" Value="Collapsed" />
        </Style>
        <Style x:Key ="zoomChartPlotStyle" TargetType="Grid">
            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                        <GradientStop Color="#FFFFFFFF" Offset="0" />
                        <GradientStop Color="#FF98FB98" Offset="1" />
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key ="zoomChartGridLineStyle" TargetType="Line">
            <Setter Property="Visibility" Value="Visible" />
            <Setter Property="Stroke" Value="#FF008000" />
            <Setter Property="Opacity" Value="0.25" />
        </Style>

        <Storyboard x:Name="fadeChartOut">
            <DoubleAnimation Duration="0:0:0.25" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ZoomChart" d:IsOptimized="True">
                <DoubleAnimation.EasingFunction>
                    <CircleEase EasingMode="EaseIn"/>
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>

        <Storyboard x:Name="fadeChartIn">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ZoomChart">
                <EasingDoubleKeyFrame KeyTime="0" Value="0">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <CircleEase EasingMode="EaseIn"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <CircleEase EasingMode="EaseIn"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>

    </UserControl.Resources>

    <Grid Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="30" />
            <RowDefinition Height="*" />
            <RowDefinition Height="39" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition x:Name="yColumn" Width="40" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="30" />
        </Grid.ColumnDefinitions>

        <Border BorderBrush="DarkGray" Grid.ColumnSpan="3">
            <Rectangle Fill="LightGray" />
        </Border>
        <StackPanel Orientation="Horizontal" Grid.ColumnSpan="2">
            <Button x:Name="btnPan" Width="100" Content="Pan" Click="btnPan_Click" />
            <Button x:Name="btnZoom" Width="100" Content="Zoom" Click="btnZoom_Click" />
            <Button x:Name="btnZoomCancel" Width="100" Content="Zoom Cancel" Click="btnZoomCancel_Click" />
            <ComboBox x:Name="cboSpan" Width="100" ItemsSource="{Binding Path=SpanOptions, Mode=OneWay}" SelectedIndex="{Binding Path=SpanIndex, Mode=TwoWay}" DisplayMemberPath="Name" SelectionChanged="cboSpan_SelectionChanged" />
        </StackPanel>


        <chartingToolkit:Chart Grid.Row="1" Grid.Column="1" Template="{StaticResource ZoomChartTemplate}" x:Name="ZoomChart" PlotAreaStyle="{StaticResource zoomChartPlotStyle}" >
            <chartingToolkit:Chart.Axes>
                <chartingToolkit:DateTimeAxis Orientation="X" Location="Bottom" AxisLabelStyle="{StaticResource zoomChartAxisLabelStyle}"
            		MajorTickMarkStyle="{StaticResource zoomChartMajorTickMarkStyle}" GridLineStyle="{StaticResource zoomChartGridLineStyle}" ShowGridLines="True"/>

                <chartingToolkit:LinearAxis Orientation="Y" Location="Left" AxisLabelStyle="{StaticResource zoomChartAxisLabelStyle}"
            		MajorTickMarkStyle="{StaticResource zoomChartMajorTickMarkStyle}"  GridLineStyle="{StaticResource zoomChartGridLineStyle}" ShowGridLines="True"/>
            </chartingToolkit:Chart.Axes>

        </chartingToolkit:Chart>

        <chartingToolkit:Chart Height="400" Grid.Row="2" Grid.Column="1" Template="{StaticResource ZoomXTemplate}" x:Name="ZoomXAxis" VerticalAlignment="Bottom" BorderThickness="0" >
            <chartingToolkit:Chart.Axes>
                <chartingToolkit:DateTimeAxis Orientation="X" Location="Bottom" Height="38" />
            </chartingToolkit:Chart.Axes>
        </chartingToolkit:Chart>

        <chartingToolkit:Chart VerticalAlignment="Stretch" Grid.Row="1" Grid.Column="0" 
                               Template="{StaticResource ZoomYTemplate}" x:Name="ZoomYAxis" BorderThickness="0" >
            <chartingToolkit:Chart.Axes>
                <chartingToolkit:LinearAxis x:Name="_yAxis1" Orientation="Y" Location="Left" Title="Y1" />
            </chartingToolkit:Chart.Axes>

        </chartingToolkit:Chart>

    </Grid>
</UserControl>